<template>
    <view>
        <status-bar :title="title"></status-bar>
        <view class="Search">
            <view class="SearchBox">
                <view class="iconfont icon-btn_search color_99 size38"></view>
                <input type="text" class="Search_Text" v-model="query_text" :placeholder="placeTxt" placeholder-class="place" @confirm="confirm" @input="Input" />
            </view>
        </view>

        <view class="Wrapper">
            <view class="list" @click="$Means.Sublevel(item)" v-for="(item, index) in pageData" :key="index">
                <text class="ellipsis_3 title">{{ item.title }}</text>
            </view>
        </view>

        <emptys v-if="!pageData.length"></emptys>
    </view>
</template>

<script>
    import api from './api.js';
    export default {
        data() {
            return {
                query_text: '',
                title: '',
                placeTxt: '',
                pt: '',
                type: '',
                list_id: '',
                label_id: '',
                page: 1,
                limit: 10,
                pageData: []
            };
        },
        onLoad(opt) {
            if (opt.pt) this.pt = opt.pt;
            if (opt.type) this.type = opt.type;
            if (opt.list_id) this.list_id = opt.list_id;
            if (opt.label_id) this.label_id = opt.label_id;
            this.init();
        },
        methods: {
            async init() {
                let reuesetObj = {
                    pt: this.pt,
                    type: this.type,
                    list_id: this.list_id,
                    label_id: this.label_id,
                    page: this.page,
                    limit: this.limit,
                    query_text: this.query_text
                };
                const requsetResult = await api.dataQuery(reuesetObj);
                this.title = requsetResult.title;
                this.placeTxt = requsetResult.query_text;
                const result = requsetResult.list || [];
                this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                if (result.length < this.limit) this.getMore = false;
            },

            async confirm() {
                if (!this.confirm) return;
                this.reset();
            },
            Input(e) {
                if (e.detail.value) return;
                this.reset();
            },
            reset() {
                this.page = 1;
                this.getMore = true;
                this.init();
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.init();
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 24rpx;
    }
</style>
<style lang="scss" scoped>
    .Wrapper {
        width: 710rpx;
        margin: 0 auto;
        .list {
            width: 100%;
            padding: 20rpx;
            background-color: #fff;
            margin-top: 24rpx;
            border-radius: 10rpx;
            .title {
                color: #676767;
                font-size: 32rpx;
            }
        }
    }
    .Search {
        width: 100%;
        height: 120rpx;
        background-color: #fff;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        .SearchBox {
            width: 100%;
            height: 80rpx;
            background-color: $page;
            display: flex;
            align-items: center;
            padding: 0 20rpx;
            overflow: hidden;
            .Search_Text {
                flex: 1;
                height: 100%;
                padding-left: 20rpx;
                font-size: 26rpx;
            }
            .place {
                color: #999;
            }
        }
    }
</style>
